import React from 'react';
import menuRoute from 'routes/menuRoute';
import contractService from 'containers/approve/contract/contract.service';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  message,
  Popconfirm,
  Popover,
  Row,
  Spin,
  Table,
  Tabs,
  Tag
} from 'antd';
import config from 'config';
import moment from 'moment';
import DocumentBasicInfo from 'containers/contract/document-basic-info';
import SlideFrame from 'components/slide-frame';
import NewPayPlan from 'containers/contract/my-contract/new-pay-plan';
import FormCard from 'containers/contract/my-contract/form-card';
import 'styles/contract/my-contract/contract-detail.scss';
import NewContractInfo from 'containers/contract/my-contract/new-contract-info';
import { messages } from 'share/common';
import CustomTable from 'containers/setting/contract-type-define/custom-table';
import ApproveHistory from 'components/template/approve-history'
import constants from 'share/constants'

const TabPane = Tabs.TabPane;

class ContractDetailCommon extends React.Component {
  constructor(props) {
    super(props);

    let operationTypeList = {
      payment: messages('my.pay'),  //付款
      reserved: messages('acp.payment.reserved'),   //反冲
      refund: messages('acp.payment.refund'),   //退票
      return: messages('acp.payment.return')  //退款
    };

    let paymentStatus = {
      reserved: {
        N: messages('common.create'),  //新建
        P: messages('my.reserving'),   //反冲中
        S: messages('my.reserve.success'),  //反冲成功
        F: messages('my.reserve.failed'),  //反冲失败
        //R: '重新退票',
        //C: '取消退票'
      },
      refund: {
        P: messages('my.refunding'),  //退票中
        S: messages('my.refund.success'),  //退票成功
        F: messages('my.refund.success'),  //退票失败
        R: messages('my.refund.again'),  //重新退票
        C: messages('my.refund.cancel')  //取消退票
      },
      return: {
        P: messages('my.returning'),  //退款中
        S: messages('my.return.success'),  //退款成功
        F: messages('my.return.failed'), //退款失败
        R: messages('my.piao.kuang'), //退票退款
        C: messages('my.kuang.piao')  //退款退票
      },
      payment: {
        P: messages('my.paying'), //
        S: messages('my.pay.success'), //支付成功
        F: messages('my.pay.failed'),  //支付失败
        R: messages('pay.workbench.RePay'),  //重新支付
        C: messages('pay.workbench.CancelPay')
      },

    };

    this.state = {
      detailLoading: true,
      planLoading: false,
      historyLoading: false,
      topTapValue: 'contractInfo',
      headerData: {},
      payPlanVisible: false,
      payInfo: {},
      approveHistory: [],
      prepaymentData: [],    //关联的预付款单
      AccountData: [],       //关联的报账单
      contractEdit: false, //合同是否可编辑
      data: [],
      showSlideFrame: false,
      slideFrameTitle: '',
      btnVisible: true,
      documentParams: {},
      record: {}, //资金计划行信息
      historyData: [], //历史信息
      EditContract: menuRoute.getRouteItem('edit-contract', 'key'), //编辑合同
      page1: 0,
      pageSize1: 10,
      payData: [],
      pagination1: {
        total: 0
      },
      contractStatus: {
        6002: { label: messages('my.contract.state.cancel'/*已取消*/), state: 'default' },
        6003: { label: messages('my.contract.state.finish'/*已完成*/), state: 'success' },
        1001: { label: messages('my.contract.state.generate'/*编辑中*/), state: 'processing' },
        6001: { label: messages('my.contract.state.hold'/*暂挂*/), state: 'warning' },
        1002: { label: messages('my.contract.state.submitted'/*审批中*/), state: 'processing' },
        1005: { label: messages('my.contract.state.rejected'/*已驳回*/), state: 'error' },
        1004: { label: messages('my.contract.state.confirm'/*已通过*/), state: 'success' },
        1003: { label: messages('my.contract.state.withdrawal'/*已撤回*/), state: 'warning' },
      },
      paginationAccount: {
        total: 0,
        showTotal: (total, range) => messages('contract.show.total', {
          range0: `${range[0]}`,
          range1: `${range[1]}`,
          total: total
        }),
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30', '40'],
      },
      paginationPre: {
        total: 0,
        showTotal: (total, range) => messages('contract.show.total', {
          range0: `${range[0]}`,
          range1: `${range[1]}`,
          total: total
        }),
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: 5,
        page: 0,
        pageSizeOptions: ['5', '10', '20', '30', '40'],
      },
      columns: [
        {
          title: messages('my.contract.currency'/*币种*/),
          dataIndex: 'currency',
          align: 'center',
          width: 90
        },
        {
          title: messages('request.amount'/*金额*/), dataIndex: 'amount', align: 'center',
          render: desc => this.filterMoney(desc)
        },
        {
          title: messages('request.base.amount'/*本币金额*/), dataIndex: 'funcAmount', align: 'center',
          render: (desc, record) => this.filterMoney(record.amount)
        },
        {
          title: messages('my.receivable'/*收款方*/), dataIndex: 'partnerName', align: 'center',
          render: (value, record) => {
            return (
              <div>
                <Tag color="#000">{record.partnerCategory === 'EMPLOYEE' ? messages('acp.employee') : messages('acp.vendor')}</Tag>
                <div style={{ whiteSpace: 'normal' }}>{record.partnerCategory === 'EMPLOYEE' ? record.partnerName + '-' + record.partnerId : record.partnerName}</div>
              </div>
            );
          }
        },
        {
          title: messages('my.contract.plan.pay.date'/*计划付款日期*/),
          dataIndex: 'dueDate',
          align: 'center',
          render: value => <Popover content={value ? moment(value)
            .format('YYYY-MM-DD') : '-'}>{value ? moment(value)
            .format('YYYY-MM-DD') : '-'}</Popover>
        },
        {
          title: messages('common.remark'/*备注*/), dataIndex: 'remark', align: 'center',
          render: value => value ?
            <Popover content={value} overlayStyle={{ maxWidth: 300 }}>{value}</Popover> : '-'
        }
      ],
      accountColumns: [  //合同行号
        {
          title: messages('my.contract.line.number'),
          dataIndex: 'contractLineNumber',
          align: 'center',
          width: 90,
        },
        {
          title: messages('pay.refund.documentNumber'), dataIndex: 'businessCode', align: 'center',
          render: (documentNumber, record) => (
            <Popover content={documentNumber}>
              <a>{documentNumber}</a>
            </Popover>
          )
        },
        {
          title: messages('my.line.number'),
          dataIndex: 'billLineSequence',
          align: 'center',
          width: 90
        },
        {          /*提交日期*/
          title: messages('acp.requisitionDate'),
          dataIndex: 'applicationDate',
          width: 100,
          align: 'center',
          render: value => (
            <Popover content={value ? moment(value)
              .format('YYYY-MM-DD') : ''}>
              {value ? moment(value)
                .format('YYYY-MM-DD') : ''}
            </Popover>)
        },   //关联金额
        {
          title: messages('my.link.amount'),
          dataIndex: 'associatedAmount',
          align: 'center',
          render: desc => this.filterMoney(desc)
        },

        {
          title: messages('my.receivable'/*收款方*/), dataIndex: 'payeeName', align: 'center',
          render: (value, record) => {
            return (
              <div>
                <div style={{ whiteSpace: 'normal' }}>
                  {record.payeeCategory === 'EMPLOYEE' ? messages('acp.employee') : messages('acp.vendor') + '-' + record.payeeName}
                </div>
              </div>
            );
          }
        },
        {           /*状态*/
          title: messages('common.column.status'),
          key: 'status',
          width: '10%',
          align: 'center',
          dataIndex: 'billStatus',
          render:  (value, record) =>
          {
            return constants.documentStatus.map(item => {
              if((item.value === String(value) && record.rejectStatus === 1000) ||
                item.value === String(value * 10000 + record.rejectStatus)) {
                return <Tag color={item.color} >{item.text}</Tag>
              }
            })
          }
        },
      ],
      preColumns: [
        {
          title: messages('my.contract.line.number'),
          dataIndex: 'contractLineNumber',
          align: 'center',
          width: 90,
        },
        {
          title: messages('pay.refund.documentNumber'),
          dataIndex: 'businessCode',
          align: 'center',
          render: (requisitionNumber, record) => (
            <Popover content={requisitionNumber}>
              <a>{requisitionNumber}</a>
            </Popover>
          )
        },
        { title: messages('my.line.number'), dataIndex: 'billLineSequence', align: 'center', width: 90 },
        {          /*提交日期*/
          title: messages('acp.requisitionDate'),
          dataIndex: 'applicationDate ',
          width: 100,
          align: 'center',
          render: value => (
            <Popover content={value ? moment(value)
              .format('YYYY-MM-DD') : ''}>
              {value ? moment(value)
                .format('YYYY-MM-DD') : ''}
            </Popover>)
        },
        {
          title: messages('my.link.amount'),
          dataIndex: 'associatedAmount',
          align: 'center',
          render: desc => this.filterMoney(desc)
        },

        {
          title: messages('my.receivable'/*收款方*/), dataIndex: 'payeeName', align: 'center',
          render: (value, record) => {
            return (
              <div>
                <div
                  style={{ whiteSpace: 'normal' }}>{record.payeeCategory === 'EMPLOYEE' ? messages('acp.employee') : messages('acp.vendor') + '-' + record.payeeName}</div>
              </div>
            );
          }
        },
        {           /*状态*/
          title: messages('common.column.status'),
          key: 'status',
          width: '10%',
          align: 'center',
          dataIndex: 'billStatus',
          render: (value, record) => {
            return constants.documentStatus.map(item => {
              if ((item.value === String(value) && record.rejectStatus === 1000) ||
                item.value === String(value * 10000 + record.rejectStatus)) {
                return <Tag color={item.color}>{item.text}</Tag>;
              }
            });
          }
        },
      ],
      payColumns: [//合同行号
        {
          title: messages('my.contract.line.number'),
          dataIndex: 'paymentReturnStatus',
          align: 'center',
          width: 90
        },
        {
          title: messages('pay.refund.billCode'), dataIndex: 'billcode', align: 'center',
          render: (desc, record) => (<Popover content={desc}>{desc}</Popover>)
        },
        {      //付款流水号
          title: messages('pay.workbench.receiptNumber'),
          dataIndex: 'documentNumber',
          align: 'center',
          render: (desc, record) => (<Popover content={desc}>{desc}</Popover>)
        },//行序号
        { title: messages('my.line.number'), dataIndex: 'num', align: 'center', width: 90 },
        {//操作类型
          title: messages('operate.log.operation.type'),
          dataIndex: 'operationType',
          align: 'center',
          width: 100,
          render: (desc) => <Popover
            content={operationTypeList[desc]}>{operationTypeList[desc]}</Popover>
        },
        {
          title: messages('common.amount'), dataIndex: 'amount', align: 'center', width: 120,
          render: desc => this.filterMoney(desc)
        },
        {          /*提交日期*/
          title: messages('common.date'), dataIndex: 'createdDate', width: 100, align: 'center',
          render: value => (
            <Popover content={value ? moment(value)
              .format('YYYY-MM-DD') : ''}>
              {value ? moment(value)
                .format('YYYY-MM-DD') : ''}
            </Popover>)
        },
        {           /*状态*/
          title: messages('my.deal.status'),
          key: 'status',
          width: '10%',
          dataIndex: 'paymentStatus',
          align: 'center',
          render: (desc, record) => paymentStatus[record.operationType][desc]
        },
      ]
    };
  }

  componentDidMount() {
    this.getInfo();
    //this.getPayList();
    // this.getPayDetailByContractHeaderId()
  }

  //获取合同信息
  getInfo = () => {
    const { columns } = this.state;
    this.setState({ detailLoading: true });
    contractService.getContractHeaderInfo(this.props.id)
      .then(response => {
        if (response.data.status === 1001 ||
          response.data.status === 1003 ||
          response.data.status === 1005) { //编辑中、已驳回、已撤回
          columns.splice(columns.length, 0,
            {
              title: messages('common.operation'/*操作*/),
              dataIndex: 'id',
              width: '10%',
              render: (text, record) => (
                <span>
                <a onClick={(e) => this.editItem(e, record)}>{messages('common.edit'/*编辑*/)}</a>
                <span className="ant-divider"/>
                <Popconfirm title={messages('common.confirm.delete'/*确定要删除吗？*/)} onConfirm={(e) => this.deleteItem(e, record)}>
                  <a>{messages('common.delete'/*删除*/)}</a>
                </Popconfirm>
              </span>)
            }
          );
        }
        let documentParams = {
          formName: response.data.contractTypeName,
          totalAmount: response.data.amount ? response.data.amount : 0,
          statusCode: response.data.status,
          remark: response.data.remark,
          businessCode: '12',
          currencyCode: response.data.currency,
          infoList: [
            { label: messages('my.contract.number'), value: response.data.contractNumber },
            {
              label: messages('common.applicant'),
              value: response.data.created && response.data.created.fullName + '-' + response.data.created.employeeId
            },
            { label: messages('my.contract.category'), value: response.data.contractCategoryName },
          ],
          attachments: response.data.attachments
        };
        this.setState({
          columns,
          documentParams,
          btnVisible: !response.data.contractName,
          headerData: response.data,
          detailLoading: false
        }, () => {
          this.getHistory(response.data.documentOid);
          this.props.getContractStatus(this.state.headerData.status);
          if (response.data.status >= 1004) {
            this.getPrepaymentHeadByContract();
            this.getAccountHeadByContract();
          }
        });
      })
      .catch(e => {
        message.error(messages('common.error'/*哦呼，服务器出了点问题，请联系管理员或稍后再试:(*/));
      });
  };


  //获取合同关联的预付款单
  getPrepaymentHeadByContract() {
    const { headerData, paginationPre } = this.state;
    contractService.getPrepaymentHeadByContractNumber(headerData.id)
      .then(res => {
        let data = [];
        res.data.map(item => data.push({
          ...item,
        }));
        paginationPre.total = data.length;
        this.setState({
          prepaymentData: data,
          paginationPre
        }, () => { });
      })
      .catch(e => {
        if (e && e.response) {
          message.error(response.data.message);
        }
      });
  }

  //获取合同关联的报账单
  getAccountHeadByContract() {
    let { headerData ,paginationAccount} = this.state;
    contractService.getAccountHeadByContract(headerData.id)
      .then(res => {
        let AccountData = [];
        res.data.forEach((item) => {
          AccountData.push({ ...item });
        });
        paginationAccount.total = AccountData.length;
        this.setState({
          AccountData,
          paginationAccount
        });
      });
  }

  //获取支付明细数据payData
  getPayDetailByContractHeaderId() {
    let { headerData, page1, pageSize1 } = this.state;
    contractService.getPayDetailByContractHeaderId(headerData.id, page1, pageSize1)
      .then(res => {
        this.setState({
          payData: res.data,
          pagination1: {
            total: Number(res.headers['x-total-count']) ? Number(res.headers['x-total-count']) : 0,
            current: page1 + 1,
            onChange: this.onChangePaper1
          }
        });
      });
  }

  //支付明细页面切换
  onChangePaper1 = (page1) => {
    if (page1 - 1 !== this.state.page1) {
      this.setState({ page1: page1 - 1 }, () => {
        this.getPayDetailByContractHeaderId();
      });
    }
  };
  //资金计划表格页码切换
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({ page: page - 1 }, () => {
        this.getPayList();
      });
    }
  };

  //合同信息内容渲染格式
  renderList = (title, value) => {
    return (
      <div className="list-info">
        <span>{title}：</span>
        <span className="content">{value}</span>
      </div>
    );
  };

  //侧滑
  showSlide = (flag) => {
    this.setState({ showSlideFrame: flag });
  };

  handleClosePlan = (params) => {
    this.setState({
      payPlanVisible: false,
    }, () => {
      if (params) {
        this.getInfo();
        this.table.reload();
      }
    });
  };

  //关闭侧滑
  handleCloseSlide = (params) => {
    let btnVisible = this.state.btnVisible;
    params && (btnVisible = params);
    this.setState({
      showSlideFrame: false,
      btnVisible
    }, () => {
      if (params) {
        this.getInfo();
      }
    });
  };

  //编辑
  edit = () => {
    this.context.router.push(this.state.EditContract.url.replace(':id', this.props.id));
  };

  //添加资金计划行
  addItem = () => {
    this.setState({
      payPlanTitle: messages('acp.add.payment'),
      payPlanVisible: true,
      payInfo: {},
    });
  };

  handleCreateInfo = () => {
    this.setState({
      showSlideFrame: true,
      slideFrameTitle: messages('my.create.contract.info')
    });
  };

  getHistory = (oid) => {
    contractService.getContractHistory(oid)
      .then(response => {
        this.setState({
          approveHistory: response.data
        });
      });
  };

  //编辑付款计划
  editItem = (e, record) => {
    e.preventDefault();
    this.setState({
      payPlanTitle: messages('acp.edit.payment'),
      payInfo: record,
    }, () => {
      this.setState({ payPlanVisible: true });
    });
  };

  //删除资金计划行
  deleteItem = (e, record) => {
    e.preventDefault();
    this.setState({ planLoading: true });
    contractService.deletePayPlan(record.id)
      .then(() => {
        this.setState({ planLoading: false, }, () => {
          this.table.reload();
          this.getInfo();
        });
        message.success(messages('common.delete.success', { name: '' }/*{name} 删除成功*/));
      })
      .catch(e => {
        this.setState({ planLoading: false });
        message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
      });
  };

  //撤回
  contractRecall = () => {
    if (this.state.headerData.formOid) {
      // 走工作流
      const { headerData } = this.state;
      let params = {
        'entities': [{
          'entityOID': headerData.documentOid,
          'entityType': headerData.documentType
        }
        ]
      };
      contractService.recallWorkflowContract(params)
        .then(res => {
          if (res.status === 200) {
            message.success(messages('common.operate.success'/*操作成功*/));
            this.getInfo();
          }
        })
        .catch(e => {
          message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
        });
    } else {
      // 不走工作流，走审核
      contractService.recallContract(this.props.id)
        .then(res => {
          if (res.status === 200) {
            message.success(messages('common.operate.success'/*操作成功*/));
            this.getInfo();
          }
        })
        .catch(e => {
          message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
        });
    }
  };

  //暂挂
  contractHold = () => {
    contractService.holdContract(this.props.id)
      .then(res => {
        if (res.status === 200) {
          message.success(messages('common.operate.success'/*操作成功*/));
          this.getInfo();
        }
      })
      .catch(e => {
        message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
      });
  };

  //取消暂挂
  contractCancelHold = () => {
    contractService.unHoldContract(this.props.id)
      .then(res => {
        if (res.status === 200) {
          message.success(messages('common.operate.success'/*操作成功*/));
          this.getInfo();
        }
      })
      .catch(e => {
        message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
      });
  };

  //取消
  contractCancel = () => {
    contractService.cancelContract(this.props.id)
      .then(res => {
        if (res.status === 200) {
          message.success(messages('common.operate.success'/*操作成功*/));
          this.getInfo();
        }
      })
      .catch(e => {
        message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
      });
  };

  //完成
  contractFinish = () => {
    contractService.finishContract(this.props.id)
      .then(res => {
        if (res.status === 200) {
          message.success(messages('common.operate.success'/*操作成功*/));
          this.getInfo();
        }
      })
      .catch(e => {
        message.error(`${messages('common.operate.filed'/*操作失败*/)}，${e.response.data.message}`);
      });
  };

  handleContractEdit = (e) => {
    e.preventDefault();
    this.setState({
      showSlideFrame: true,
      slideFrameTitle: messages('my.edit.contract.info')
    });
  };

  //渲染支付明细
  renderPay = () => {
    const { payData } = this.state;
    let renderPay = [];
    if (payData.length > 0) {
      payData.map((item) => {
        renderPay.push(<FormCard key={item.head.id} basicsData={{ item }} formType={'12'}/>);
      });
    }
    return renderPay;
  };

  handleHeadEdit = () => {
    let { EditContract, headerData } = this.state;
    this.context.router.push(EditContract.url.replace(/(.*):id(.*):contractTypeId(.*)/, `$1${headerData.id}$2${headerData.contractTypeId}`));
  };

  //切换tab
  tabChange = (key) => {
    this.setState({ tabIndex: key }, () => {
      if (key === 'link') {
        if (this.state.headerData.status >= 1004) {
          this.getAccountHeadByContract();
          this.getPrepaymentHeadByContract();
        }
      }
    });
  };

  renderContent() {
    const { approveHistory, payInfo, payPlanVisible, payPlanTitle, detailLoading, planLoading, documentParams, columns, showSlideFrame, headerData, slideFrameTitle } = this.state;
    let flag = headerData.status !== 1001 && headerData.status !== 1003 && headerData.status !== 1005;
    let visible = headerData.status === 6001 || headerData.status === 6003 || headerData.status === 1002 || headerData.status === 6002;
    return (
      <div className="contract-content" style={flag ? { marginRight: 32 } : {}}>
        <div className="document-basic-info" style={flag ? { paddingTop: 0 } : {}}>
          <DocumentBasicInfo params={documentParams} noHeader={true}>
            {
              headerData.status && (headerData.status === 1001 || headerData.status === 1003 || headerData.status === 1005) &&
              <Button onClick={this.handleHeadEdit} type='primary' style={{ float: 'right', top: -4 }}>
                {messages('common.edit')}
              </Button>
            }
            {headerData.status && headerData.status === 1002 &&
            <Button type="primary" onClick={this.contractRecall} style={{ float: 'right', top: -4 }}>
              {messages('common.withdraw')}
            </Button>}

            {headerData.status && headerData.status === 1004 &&
            <span>
                <Button size="small" type="primary" onClick={this.contractFinish} style={{ float: 'right', top: -4 }}>
                  {messages('my.contract.state.finish')}
                </Button>
                <Button size="small" type="primary" onClick={this.contractCancel} style={{ marginRight: 20, float: 'right', top: -4 }}>{
                  messages('common.cancel')}
                </Button>
                <Button size="small" type="primary" onClick={this.contractHold} style={{ marginRight: 20, float: 'right', top: -4 }}>
                  {messages('my.contract.state.hold')}
                </Button>
              </span>
            }
            {headerData.status && headerData.status === 6001 &&  //暂挂
            <Button type="primary" onClick={this.contractCancelHold} style={{ float: 'right', top: -4 }}>
              {messages('my.contract.cancel.hold')}
            </Button>
            }
          </DocumentBasicInfo>
        </div>
        <Spin spinning={detailLoading}>
          <div className="contract-info">
            <div className="contract-info-header" style={{ borderBottom: '1px solid rgb(236, 236, 236)' }}>
              <h3 style={{ display: 'inline', marginLeft: '20px', fontSize: '18px' }}>
                {messages('my.contract.info')}
              </h3>
              <a style={{
                marginLeft: 15,
                display: headerData.status === 1004 || headerData.status === 6001 || headerData.status === 6003 || headerData.status === 1002 || headerData.status === 6002 ? 'none' : !headerData.contractName ? 'none' : 'inline-block'
              }}
                 onClick={this.handleContractEdit}>
                {messages('common.edit')}
              </a>
            </div>
            <div style={{ marginTop: 5 }}>
              <Button type='primary' style={{ marginLeft: 20, display: visible ? 'none' : !headerData.contractName ? 'inline-block' : 'none' }} onClick={this.handleCreateInfo}>
                {messages('my.create.contract.info')}
              </Button>
            </div>
            <div style={{ marginLeft: 15 }}>
              <Row gutter={24} className="info-items">
                <Col span={2} className="label-tips">{messages('common.baseInfo')}:</Col>
                <Col span={2} offset={1} className="item-label">
                  {messages('my.contract.contractCompany')}:
                </Col>
                <Col span={5} className="item-value">
                  <span title={headerData.companyName}>{headerData.companyName}</span>
                </Col>
                <Col span={2} className="item-label">{messages('acp.contract.name')}:</Col>
                <Col span={5} className="item-value">
                  <span title={headerData.contractName}>{headerData.contractName}</span>
                </Col>
                <Col span={2} className="item-label">{messages('my.contract.signDate')}:</Col>
                <Col span={5} className="item-value"><span title={headerData.contractName ? headerData.signDate ? moment(new Date(headerData.signDate))
                  .format('YYYY-MM-DD') : '-' : ''}>{headerData.contractName ? headerData.signDate ? moment(new Date(headerData.signDate))
                  .format('YYYY-MM-DD') : '-' : ''}</span></Col>
              </Row>

              <Row gutter={25} className="info-items">
                <Col span={2} className="label-tips">{messages('my.contract.party.info')}:</Col>
                <Col span={2} offset={1} className="item-label">{messages('my.contract.partner.category')}:</Col>
                <Col span={5} className="item-value"><span title={headerData.partnerCategoryName}>{headerData.partnerCategoryName}</span></Col>
                <Col span={2} className="item-label">{messages('my.contract.partner')}:</Col>
                <Col span={5} className="item-value"><span title={headerData.partnerName}>{headerData.partnerName}</span></Col>
              </Row>

              <Row gutter={24} className="info-items">
                <Col span={2} className='label-tips'>{messages('supplier.management.otherInfo')}:</Col>
                <Col span={2} offset={1} className="item-label">{messages('my.contract.responsible.department')}:</Col>
                <Col span={5} className="item-value"><span title={headerData.unitName}>{headerData.contractName ? headerData.unitName ? headerData.unitName : '-' : ''}</span></Col>
                <Col span={2} className="item-label">{messages('my.contract.responsible.person')}:</Col>
                <Col span={5} className="item-value"><span title={headerData.employeeId}>{headerData.contractName ? headerData.employee ? headerData.employee.fullName : '-' : ''}</span></Col>
                <Col span={2} className="item-label">{messages('budget.controlRule.effectiveDate')}:</Col>
                <Col span={5} className="item-value">
                  <span title={headerData.contractName ? (headerData.startDate ? moment(new Date(headerData.startDate))
                    .format('YYYY-MM-DD') : '-') + ' ~ ' + (headerData.endDate ? moment(new Date(headerData.endDate))
                    .format('YYYY-MM-DD') : '-') : ''}>
                    {headerData.contractName ? (headerData.startDate ? moment(new Date(headerData.startDate))
                    .format('YYYY-MM-DD') : '-') + ' ~ ' + (headerData.endDate ? moment(new Date(headerData.endDate))
                    .format('YYYY-MM-DD') : '-') : ''}
                  </span>
                </Col>
              </Row>
            </div>
          </div>
        </Spin>

        <Spin spinning={planLoading}>
          <div className="pay-info" >
            <h3 className="info-header-title">
              {messages('acp.payment.info')}
            </h3>

            <Row gutter={24} className="pay-info-header" style={headerData.status === 6001 || headerData.status === 6003 || headerData.status === 6002 || headerData.status === 1002 ? { marginTop: -20 } : {}}>
              <Col span={12}>
                <Button
                  style={{ display: headerData.status === 1004 || headerData.status === 6001 || headerData.status === 6003 || headerData.status === 6002 || headerData.status === 1002 ? 'none' : 'inline' }}
                  className='header-btn' onClick={this.addItem}
                  type='primary'>{messages('acp.new.payment')}
                </Button>
              </Col>
              <Col span={12} className="header-tips" style={{ textAlign: 'right' }}>
                <Breadcrumb style={{ marginBottom: '10px' }}>
                  <Breadcrumb.Item>{messages('common.amount')}:&nbsp;
                    <span style={{ color: 'Green' }}> {headerData.currency}&nbsp;{this.filterMoney(headerData.amount)}</span>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item>
                    {messages('acp.function.amount')}:
                    <span style={{ color: 'Green' }}> {headerData.currency}&nbsp;{this.filterMoney(headerData.amount)}</span>
                  </Breadcrumb.Item>
                </Breadcrumb>
              </Col>
            </Row>

            <CustomTable
              tableKey="id"
              ref={ref => this.table = ref}
              url={`${config.contractUrl}/api/contract/line/herder/${this.props.id}`}
              showNumber={true}
              pagination={{ pageSize: 5 }}
              columns={columns}/>
          </div>
        </Spin>

        <div className="history">
          {
            approveHistory[0] &&
            <section className="history-body">
              <h3 className="info-header-title">
                {messages('contract.key53')/*审批信息*/}
              </h3>
              <ApproveHistory businessCode={headerData.contractNumber}
                              isShowReply={true}
                              approvalHistory={approveHistory}/>
            </section>
          }
        </div>

        <SlideFrame title={slideFrameTitle}
                    show={showSlideFrame}
                    content={NewContractInfo}
                    onClose={() => this.showSlide(false)}
                    afterClose={this.handleCloseSlide}
                    params={{ contractHead: headerData, flag: showSlideFrame }}/>

        <SlideFrame title={payPlanTitle}
                    show={payPlanVisible}
                    content={NewPayPlan}
                    companyId={headerData.companyId}
                    params={{ contractHead: headerData, payInfo: payInfo, flag: payPlanVisible }}
                    onClose={() => this.setState({ payPlanVisible: false })}
                    afterClose={this.handleClosePlan}/>
      </div>
    );
  }

  render() {
    const { accountColumns, payColumns, paginationAccount, paginationPre, preColumns, headerData, prepaymentData, AccountData } = this.state;
    let flag = headerData.status !== 1001 && headerData.status !== 1003 && headerData.status !== 1005;
    return (<div style={flag ? {} : {margin: '-20px 20px'}}>
      {headerData.status === 1001 || headerData.status === 1003 || headerData.status === 1005 ?
        this.renderContent()
        :
        <Tabs defaultActiveKey="detail" onChange={this.tabChange}>
          <TabPane style={{ marginLeft: 12 }} tab={messages('menu.contract-detail')} key="detail">
            {this.renderContent()}
          </TabPane>
          <TabPane tab={messages('my.link.info')} key="link">
            <div style={{ background: 'white', margin: '20px 0 50px 0', padding: '20px 30px 20px 20px' }}>
              <h3 style={{ fontSize: 18, borderBottom: '1px solid #ececec' }}>
                {messages('my.link.pre')}
              </h3>
              <Table
                rowKey="documentLineId"
                columns={preColumns}
                dataSource={prepaymentData}
                pagination={paginationPre}
                bordered
                size='middle'/>
            </div>
            <div style={{ background: 'white', margin: '20px 0 50px 0', padding: '20px 30px 20px 20px' }}>
              <h3 style={{ fontSize: 18, borderBottom: '1px solid #ececec' }}>
                {messages('my.link.rem')}
              </h3>
              <Table
                rowKey="billLineId"
                columns={accountColumns}
                dataSource={AccountData}
                pagination={paginationAccount}
                bordered
                size='middle'/>
            </div>
            <div style={{ background: 'white', margin: '20px 0 50px 0', padding: '20px 30px 20px 20px' }}>
              <h3 style={{ fontSize: 18, borderBottom: '1px solid #ececec' }}>
                {messages('my.pay.info')}
              </h3>
              <CustomTable
                tableKey="id"
                url={`${config.baseUrl}/api/contract/getContractDocmentPaydetail`}
                params={{ contractHeaderId: headerData.id }}
                pagination={{ pageSize: 5 }}
                columns={payColumns}/>
            </div>
          </TabPane>
        </Tabs>
      }
    </div>);
  }
}

ContractDetailCommon.propTypes = {
  id: React.PropTypes.any.isRequired, //显示数据
  isApprovePage: React.PropTypes.bool, //是否在审批页面
  getContractStatus: React.PropTypes.func, //确认合同信息状态
};

ContractDetailCommon.defaultProps = {
  isApprovePage: false,
  getContractStatus: () => {
  }
};

ContractDetailCommon.contextTypes = {
  router: React.PropTypes.object
};

const wrappedContractDetailCommon = Form.create()((ContractDetailCommon));

export default wrappedContractDetailCommon;
